<template>
	<view>
		<uv-navbar
			:leftIconColor="navstyle.txtColor"
			:titleStyle="titleStyle"
			:title="navstyle.title"
			:leftIcon="navstyle.leftIcon"
			:bgColor="navstyle.bgColor"
			:fixed="false" 
			@leftClick="leftClick"
			:safeAreaInsetTop="false">
		</uv-navbar>
		<view class="password_box">
			<view class="password_list">
				<view class="password_laber">
					收货人
				</view>
				<input v-model="userForm.name" class="uni-input" placeholder="请输入收货人" type="text" />
			</view>
			<view class="password_list">
				<view class="password_laber">
					手机号码
				</view>
				<input  v-model="userForm.phone"  class="uni-input" placeholder="请输入手机号码" type="text" />
			</view>
			<view class="password_list" @click="open">
				<view class="password_laber">
					所在区域
				</view>
				<input v-model="addressName" class="uni-input" placeholder="请输入所在地区" type="text" />
				<uv-icon name="arrow-right"></uv-icon>
			</view>
			<view class="password_view">
				<view style="width: 100%;
					height: 36px;
					line-height: 36px;
					text-align: left;
					padding-left: 15px;"  class="password_laber">
					详细地址
				</view>
				<div class="uni-textarea-line"> </div>
				<view class="password_textarea">
					<textarea v-model="userForm.userAddress" placeholder="请输入详细地址" class="uni-textarea"  maxlength="140"/>
				</view>
				
			</view>
			<view class="password_list">
				<view class="password_laber">
					设为默认地址
				</view>
				<view class="right">
					<uv-switch v-model="defaultAddress" size="25"></uv-switch>
					
				</view>
			</view>
			<button class="exitbtn" @click="confirmClick">确定</button>
			<uv-picker
			ref="picker"
			:columns="addressList" 
			:loading="loading" 
			keyName="name"
			@change="change"
			@confirm="confirm">
			</uv-picker>
		</view>
	</view>
</template>

<script>
	import {areaList,addAddress} from '@/api/bonus.js';
	export default{
		data(){
			return{
				navstyle: {
					title: "添加收货地址",
					txtColor: "#333333",
					bgColor: "#FFFFFF",
					leftIcon: "arrow-left"
				},
				titleStyle: {
					fontWeight: 700
				},
				userForm: {
					name: "",
					phone: "",
					provinceId: "",
					cityId: "",
					areaId: "",
					userAddress: "",
					isDefault: "0",
					provinceName:'',
					cityName:'',
					areaName:'',
					
				},
				defaultAddress: false,
				addressName: "",
				loading: false,
				provinces: [],
				citys: [],
				areas: [],
				pickerValue: [0, 0, 0],
				defaultValue: [3442, 1, 2]
			}
		},
		created() {
			this.getData();
		},
		computed: {
			addressList() {
				return [this.provinces, this.citys, this.areas];
			}
		},
		methods:{
			leftClick() {
			
				uni.reLaunch({
				  url: '/pages/bonus/address' // 替换成上一页的路径
				});

			},
			getData(){
				areaList().then(response=>{
					let data = response.data
					console.log(data,33333)
					console.log('获取的数据：', response);
					this.provinces = data.sort((left, right) => (Number(left.code) > Number(right.code) ? 1 : -1));
					console.log(this.provinces)
					this.handlePickValueDefault()
					setTimeout(() => {
						this.loading = false
					}, 200)
				});
			},
			change(e) {
				if (this.loading) return;
				const { columnIndex, index, indexs } = e
				// 改变了省
				if (columnIndex === 0) {
					this.citys = this.provinces[index]?.children || []
					this.areas = this.citys[0]?.children || []
					this.$refs.picker.setIndexs([index, 0, 0],true)
				} else if (columnIndex === 1) {
					this.areas = this.citys[index]?.children || []
					this.$refs.picker.setIndexs(indexs,true)
				}
			},
			handlePickValueDefault() {
				// 设置省
				this.pickerValue[0] = this.provinces.findIndex(item => Number(item.id) === this.defaultValue[0]);
				// this.provinceName = this.provinces[this.pickerValue[0]].name;
				
				// 设置市
				this.citys = this.provinces[this.pickerValue[0]]?.children || [];
				
				this.pickerValue[1] = this.citys.findIndex(item => Number(item.id) === this.defaultValue[1]);
				// 设置区
				this.areas = this.citys[this.pickerValue[1]]?.children || [];
				this.pickerValue[2] = this.areas.findIndex(item => Number(item.id) === this.defaultValue[2]);
				// 重置下位置
				this.$refs.picker.setIndexs([this.pickerValue[0], this.pickerValue[1], this.pickerValue[2]],true);
			},
			open() {
				this.$refs.picker.open();
				this.handlePickValueDefault()
			},
			confirm(e) {
				this.userForm.provinceId = e.value[0].id,
				this.userForm.provinceName = e.value[0].name,
				this.userForm.cityId = e.value[1].id,
				this.userForm.cityName = e.value[1].name,
				this.userForm.areaId = e.value[2].id,
				this.userForm.areaName = e.value[2].name,
				this.addressName = e.value[0].name + "/" + e.value[1].name + "/" + e.value[2].name
			},
			confirmClick(){
				var reg_tel = /^1[3456789]\d{9}$/;
				
				
				if(!this.userForm.name){
					uni.showToast({
						icon: "none",
						title: "请输入收货人姓名"
					})
					return
				}
				
				if(!this.userForm.phone){
					uni.showToast({
						icon: "none",
						title: "请输入手机号"
					})
					return
				}
				if(!reg_tel.test(this.userForm.phone)){
					uni.showToast({
						icon: "none",
						title: "手机号码格式不正确"
					})
					return
				}
				if(!this.userForm.areaId){
					uni.showToast({
						icon: "none",
						title: "请选择省市区"
					})
					return
				}
				if(!this.userForm.userAddress){
					uni.showToast({
						icon: "none",
						title: "请输入详细地址"
					})
					return
				}
				this.defaultAddress = true ? this.userForm.isDefault = 1 : this.userForm.isDefault = 0;
				addAddress(this.userForm).then(res=>{
					if(res.code ==1){
						uni.showToast({
							icon: "none",
							title: res.msg,
							duration: 2000
						})
						uni.reLaunch({
						  url: '/pages/bonus/address' // 替换成上一页的路径
						});
					}
					
					
				})
				
			},
		}
		
	}
	
</script>

<style>
	.password_box {
	    display: flex;
	    flex-direction: column;
	}
	.password_list{
	    display: flex;
	    flex-direction: row;
	    padding: 5px 5px;
	    height: 50px;
	    border-bottom: 1px solid #efefef;
	    align-items: center;
	}
	.password_laber {
	    width: 25%;
	    font-size: 13px;
	    text-align: center;
	}
	.password_list .uni-input {
	    width: 75%;
	    height: 28px;
	    background-color: #fff;
	    padding: 5px 10px;
	    border-radius: 5px;
	    font-size: 13px;
	}
	.password_textarea {
	    height: 100px;
	    padding: 0 10px;
	}
	.uni-textarea-line {
	    width: 1em;
	}
	.uni-textarea {
	    width: auto;
	    height: 100px;
	    border: 1px solid #efefef;
	    border-radius: 4px 4px;
	    padding: 5px 10px;
	}
	.right {
	    margin-left: auto;
	}
	.exitbtn {
	    width: 80%;
	    border-radius: 50px;
	    background: linear-gradient(135deg, #d66c6b, #ed6266);
	    font-size: 14px;
	    margin: 32px auto 0 auto;
	    color: #fff;
	    padding: 3px 0;
	    border: none;
	}
</style>